<template>
  <view class="dy-scroll-container">
    <dy-navbar title="input" />
    <scroll-view class="dy-scroll" scroll-y="">
      <dy-card>
        <template slot="body">
          <dy-form title="基础用法">
            <dy-form-item label="名称"><dy-input v-model="name" /></dy-form-item>
          </dy-form>
        </template>
      </dy-card>

      <dy-card>
        <template slot="body">
          <dy-form title="禁用状态">
            <dy-form-item label="名称"><dy-input v-model="name" disabled /></dy-form-item>
          </dy-form>
        </template>
      </dy-card>

      <dy-card>
        <template slot="body">
          <dy-form title="密码输入框">
            <dy-form-item label="密码"><dy-input v-model="password" password /></dy-form-item>
          </dy-form>
        </template>
      </dy-card>

      <dy-card>
        <template slot="body">
          <dy-form title="输入框类型" wrap>
            <dy-form-item label="文本域">
              <dy-input v-model="textarea" type="textarea" />
            </dy-form-item>
            <dy-form-item label="普通文本">
              <dy-input v-model="text" type="text" />
            </dy-form-item>
            <dy-form-item label="数字">
              <dy-input v-model="number" type="number" />
            </dy-form-item>
            <dy-form-item label="身份证">
              <dy-input v-model="idcard" type="idcard" />
            </dy-form-item>
            <dy-form-item label="带小数点的数字">
              <dy-input v-model="digit" type="digit" />
            </dy-form-item>
          </dy-form>
        </template>
      </dy-card>

      <dy-card>
        <template slot="body">
          <dy-form title="长度限制" wrap>
            <dy-form-item label="限制10个字符">
              <dy-input v-model="textarea1" maxlength="10" />
            </dy-form-item>
            <dy-form-item label="限制30个字符">
              <dy-input v-model="textarea2" type="textarea" maxlength="30" />
            </dy-form-item>
          </dy-form>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Input',
  data() {
    return {
      name: '李伟兰',
      password: '',
      textarea: '',
      textarea1: '',
      textarea2: '',
      text: '',
      digit: '',
      idcard: '',
      number: 0,
      checkboxGroupMax: ['male'],
      stepper: 1
    }
  }
}
</script>
